<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Harmonic Residence</title>
		
		<!-- DELETE LATER -->
		<link rel="stylesheet" href="css/adam.css">
		<link rel="stylesheet" href="css/api.css">		
		<!-- /DELETE LATER -->
		
		<link rel="stylesheet" href="sp://import/css/adam.css">
		<link rel="stylesheet" href="sp://import/css/api.css">
		<link rel="stylesheet" href="css/main.css">
		<script type="text/javascript" src="script/jquery.min.js"></script>
		<script type="text/javascript" src="script/harmonicResidence.js"></script>
		<script type="text/javascript" src="script/users.js"></script>
		<script type="text/javascript" src="script/sessions.js"></script>
		
	</head>
	<body>
		<div id="header">
			<img id="logo" src="harmoniius_logo.png" alt="harmonii.us logo" />
		</div>

		<button id="fb-logout-button"class="sp-button">Logout</button>
		
		<!-- Log in page -->
		<div id="login-page">
			<h1>Welcome to Harmonic Residence</h1>
			<p id="info">
				By signing in with Facebook, Harmonic Residence can personalize your listening experience by allowing you to invite friends, add and vote for songs. Harmonic Residence will never post to Facebook without your permission.
			</p>

			<p id="disclaimer">
				By clicking the button below and logging on to your Harmonic Residence account, you acknowledge that Harmonic Residence will be able to access and store information about my Spotify use. You also acknowledge that Harmonic Residence's collection and use of information is governed by Harmonic Residence Terms and Conditions.
			</p>

			<button id="fb-login-button" class="sp-button">Sign In</button>
		</div>

		<!-- Home page -->
		<div id="home" class="section">
			<h1>Welcome, Shiho!</h1>

			<!-- Info (if necessary) -->
			<div id="session-intro">
				<button id="create-session" class="sp-button">Create Session</button>
			</div>

			<!-- Previous session table -->
			<div id="previousSession">
				<h2>Previous Sessions</h2>
			</div>

			<!-- Friend compatibility -->
			<div id="compatibility">
				<h2>Friend Compatibility</h2>
			</div>
			<!--button id="fb-login-button" class="sp-button">Sign In</button>
			<button id="fb-logout-button"class="sp-button">Logout</a-->
		</div>
		
		<!-- Session page -->
		<div id="session" class="section">
			
			<div id="session-details">
				<!-- Session name -->
				<!--input type="text" id="session-name" placeholder="Session name" /-->
				<h1>Shiho's Session</h1>
				
				<!-- Session description -->
				<!--textarea id="description" max-length="140" name="session-description"  placeholder="Describe the session in 140 characters or less"></textarea-->
				<p>"Yay! HCDE 411!"</p>
			</div>

			<!--p id="listeners">25 listeners</p-->

			<!-- Now playing section -->
			<div id="now-playing">
				<h2>Now Playing</h2>
				<div class="album-art">
					<img id="now-art" src="" />
				</div>
				<div class="song-info">
					<h3 class="song-title first"><!--Now playing song goes here-->Split Emotions</h3>
					<p class="artist-name first">the pillows<!-- Now playing artist goes here --></p>
					<p class="percent first"><!-- First place percent -->75% </span id="of-votes">of votes</span></p>
				</div>	
			</div>

			<!-- Previous song voting results -->
			<div id="prev-results">
				<div id="second" class="lost">
					<h3 class="song-title"><!-- song goes here-->DIFFERENT SENSE</h3>
					<p class="artist-name">DIR EN GREY<!-- artist goes here --></p>
					<p class="percent"><!--  percent -->20%</p>
				</div>
				<div id="third" class="lost">
					<h3 class="song-title"><!--song goes here-->STRONG</h3>
					<p class="artist-name">MIYAVI vs KREVA<!-- artist goes here --></p>
					<p class="percent"><!-- place percent -->5%</p>
				</div>
			</div>

			<!-- Next queue choices -->
			<div id="voting-choices">
				<h2>Vote For Next Song</h2>
				
				<!-- Song choice 1 -->
				<div id="song1" class="choice">	
					<h3 class="song-title"><!-- song -->December</h3>
					<p class="artist-name"><!-- artist-->Weezer</p>
					<div class="album-art">
							<img src="" />
					</div>
				</div>
				
				<!-- Song choice 2-->
				<div id="song2" class="choice">
					<h3 class="song-title"><!-- song -->Like a Stone</h3>
					<p class="artist-name"><!-- artist-->Audioslave</p>
					<div class="album-art">
							<img src="" />
					</div>
				</div>
				
				<!-- Song choice 3 -->
				<div id="song3" class="choice">
					<h3 class="song-title"><!-- song -->Get By</h3>
					<p class="artist-name"><!-- artist-->Talib Kweli</p>
					<div class="album-art">
							<img src="" />
					</div>
				</div>
			</div>
			
			<!-- Invite friends/QR code -->
			<div id="invite">
				<h2>Invite Friends</h2>
				<p>Scan QR code:</p>
				<a href="">http://harmonii.us/sumx</a>
			</div>

		</div>



		<!-- Hidden for presentation -->
		<!-- Settings page >
		<div id="settings" class="section">
			<h1>Sample settings page!</h1>
		</div>

		<! Help page >
		<div id="help" class="section">
			<h1>Sample help page!</h1>
		</div -->
	
	</body>
</html>